<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/assets/element-plus/index.css">
    <!-- 引入组件库 -->
    <script src="/assets/vue/vue.global.js"></script>
    <script src="/assets/element-plus/index.full.js"></script>
    <script src="/assets/axios/axios.js"></script>

    <style>

        html,
        body,
        .el-container {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px !important;
            /*外部间距也是如此设置*/
            margin: 0px !important;
            /*统一设置高度为100%*/
            height: 100vh;
        }
        .el-menu {
            border-right: 0px !important;
        }

        .el-header {
            background-color: #2c3e50;
        }

        .el-aside {
            background-color: #545c64;
        }

        .el-main {
            padding: 0px;
        }

        .el-link {
            width: 100%;
            color: white;
            text-align: left;
        }

        .el-link.el-link--default{
            color: #f2f6fc;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="20">
                        <h1 style="color: white"></h1>
                        <a href="/login.html" id="logout"></a>
                    </el-col>
                    <el-col :span="4" style="text-align: right">
            <span style="line-height: 60px;color:white">
            {{user.deptName}}-{{user.empName}} <el-button @click="logout" style="margin-left: 10px">退出</el-button>
              </span>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu
                            active-text-color="#ffd04b"
                            background-color="#545c64"
                            class="el-menu-vertical-demo"
                            text-color="#fff"
                            default-active="0"
                    >

                        <el-menu-item index="idx" v-for="(m, idx) in menuList">
                            <span><el-link :href="m.url" target="main">{{ m.menuName }}</el-link></span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <iframe :src="menuList[0].url" name="main" style="width: 100%;height: 100%;border: 0px;vertical-align:top"></iframe>
                </el-main>
            </el-container>
        </el-container>
    </div>
</div>

<script>
    const Main = {
        data() {
            return {
                menuList: [{url: ""}],
                user: {}
            };
        },
        methods :{
            logout : function(){
                axios.get("/logout").then(function(response){
                    window.location.href = "/login.html";
                })


            }
        },
        mounted() {
            const app = this;
            axios.get("/api/menus")
                .then(function(response){
                    app.menuList.length = 0;
                    for(const m of response.data.data.menuList){
                        app.menuList.push(m);
                    }
                });

            axios.get("/api/authentication/info")
                .then(function(response){
                    app.user = response.data.data.user;
                })
        }
    };
    const app = Vue.createApp(Main);
    app.use(ElementPlus);
    app.mount("#app")
</script>

</body>
</html>